<template>
  <div>
    <el-dialog
      title="修改文章"
      :visible.sync="buttontype"
      @close="fun(tname)"
      @open="openwith"
    >
      <div class="nav">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="14">
              <el-form-item label="标题">
                <el-input v-model="form.title" placeholder="标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="选择类型">
                <el-select
                  v-model="form.idChannel"
                  placeholder="类型"
                  v-if="changelistview"
                >
                  <el-option
                    v-for="i in changelistview"
                    :key="i.id"
                    :label="i.name"
                    :value="i.id"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div>
        <div ref="watchcontent" class="watchcontent"></div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="upnext">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import wangeditor from "wangeditor";
import { http, changelist, article, file } from "../../api/api";
export default {
  props: ["type", "fun", "tname", "tablerow"],
  data() {
    return {
      buttontype: this.type, //模态框状态
      formtype: {
        //数据
        idChannel: "",
        title: "",
      },
      changelistview: "",
      form: "",
      editor: "",
    };
  },
  mounted() {
    this.getchangellist();
  },
  methods: {
    openwith() {
      this.$nextTick(() => {
        console.log(this.$refs.watchcontent);
        this.editor = new wangeditor(this.$refs.watchcontent);

        // 隐藏图片
        this.editor.customConfig.showLinkImg = false;
        // 上传图片到服务器
        this.editor.customConfig.uploadImgServer = "/upload";
        // 每次只能上传一张图片
        this.editor.customConfig.uploadImgMaxLength = 1;
        // 自定义上传图片事件
        this.editor.customConfig.customUploadImg = (files, insert) => {
          // files 是 input 中选中的文件列表
          // insert 是获取图片 url 后，插入到编辑器的方法
          console.log(files);
          let f = files[0];
          let d = new FormData();
          d.append("file", f);
          // 发送请求给服务器
          this.$http
            .post(http + file, d, {
              headers: {
                "constnet-type" : "multipart/form-data",
                "Authorization": localStorage.token,
              },
            })
            .then(
              (data) => {
                if (data.data.msg == "成功") {
                  console.log(data.data);
                  var dataimg = data.data.data.realFileName;
                  dataimg = dataimg.replace(
                    /\/local\/program\/nginx\/conf/g,
                    "http://39.101.217.150"
                  );
                  /*  /local/program/nginx/conf/static/flash3c40b8e3-cba0-4e89-bacd-0429f40e39e1.jpg */

                  insert(dataimg);
                } else {
                  this.$message.error(data.data.msg);
                }
              },
              (err) => {
                this.$message.error(err.data.message);
              }
            );
          // 上传代码返回结果之后，将图片插入到编辑器中
        };

        this.editor.create();

        this.editor.txt.html(this.tablerow.content);
      });
    },

    upnext() {
      var json = {
        author: this.$store.state.user.info.profile.name,
        content: this.editor.txt.html().replace(/\%/g, "%25"),
        idChannel: this.form.idChannel,
        title: this.form.title,
        id: this.form.id,
      };
      console.log(json);
      var type = true;
      for (var i in json) {
        if (json[i] == "") {
          type = false;
        } else {
          type = true;
        }
      }
      if (type) {
        this.$http.post(http + article, JSON.stringify(json)).then(
          (data) => {
            if (data.data.msg == "成功") {
              console.log(data.data);
              this.$message.success("恭喜,提交数据成功");
            } else {
              this.$message.error(data.data.msg);
            }
          },
          (err) => {
            this.$message.error(err.data.message);
          }
        );
      } else {
        this.$message.error("请补全数据");
      }
    },
    // 栏目信息
    getchangellist() {
      this.$http.get(http + changelist).then(
        (data) => {
          console.log(data.data.data);
          if (data.data.msg == "成功") {
            this.changelistview = data.data.data;
          } else {
            this.$message.error(data.data.msg);
          }
        },
        (err) => {
          this.$message.error(err.data.message);
        }
      );
    },
  },
  watch: {
    type() {
      this.buttontype = this.type;
    },
    tablerow() {
      var json = {};
      for (var i in this.tablerow) {
        this.$set(json, i, this.tablerow[i].toString());
      }
      this.form = json;
    },
  },
};
</script>

<style>
</style>